<script setup>
import { defineComponent, toRefs } from "vue";

const CustomRender = defineComponent({
  props: {
    render: {
      type: Function,
      required: true,
    },
  },
  render() {
    return this.render();
  },
});

const props = defineProps({
  loading: {
    type: Boolean,
    default: false,
  },
  tableData: {
    type: Array,
    default: () => [],
  },
  tableColumns: {
    type: Array,
    default: () => [],
  },
  queryParams: {
    type: Object,
    default: () => ({}),
  },
  queryItem: {
    type: Array,
    default: () => [],
  },
  pagingParams: {
    type: Object,
    default: () => ({}),
  },
});
const { pagingParams, queryParams } = toRefs(props);

const emit = defineEmits(["handleQuery", "handleReset"]);

function handleQuery() {
  emit("handleQuery");
}

function handleReset() {
  emit("handleReset");
}
</script>

<template>
  <div class="h-full flex flex-col gap-4">
    <div class="grid grid-cols-4 gap-4">
      <template v-if="queryItem.length > 0">
        <div v-for="item in queryItem" :key="item.prop">
          <CustomRender
            v-if="item.customRender"
            v-model="queryParams[item.prop]"
            :render="item.customRender"
          ></CustomRender>
          <el-input
            v-else
            v-model="queryParams[item.prop]"
            prefix-icon="Search"
            :placeholder="item.placeholder"
            clearable
          ></el-input>
        </div>
      </template>
      <div>
        <el-button type="primary" @click="handleQuery">查询搜索</el-button>
        <el-button @click="handleReset">重置查询</el-button>
      </div>
    </div>
    <el-table
      v-loading="loading"
      header-cell-class-name="!bg-[#e7e7e7]"
      class="grow rounded"
      :data="tableData"
      stripe
    >
      <el-table-column
        v-for="col in tableColumns"
        :key="col.prop"
        :label="col.label"
        :min-width="col.width"
        :prop="col.prop"
        :fixed="col.fixed"
        align="center"
      >
        <template #default="{ row }">
          <template v-if="col.customRender">
            <CustomRender :render="() => col.customRender(row)"></CustomRender>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-model:current-page="pagingParams.page"
      v-model:page-size="pagingParams.limit"
      :total="pagingParams.total"
      :page-sizes="[10, 20, 50]"
      class="justify-end"
      layout="total, sizes, prev, pager, next, jumper"
      background
      @size-change="handleQuery"
      @current-change="handleQuery"
    />
  </div>
</template>
